<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    @keyframes leftToRight{
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      0%{
        transform: translateX(0px);
      }
    }
    .animation{
      animation: leftToRight 3s;
    }
    .transtion{
      transition: 3s background-color ease;
    }
    .blue{
      background: blue;
    }
    .green{
      background: green;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script>
    
    const app = Vue.createApp({
      data(){
        return{
          animate:{
            animation:false,
            transtion:true,
            blue:true,
            green:false
          },
          styleObj:{
            background:'blue'
          }
        }
      },
      methods:{
        /* click(){
          this.animate.animation=!this.animate.animation;
          this.animate.green=!this.animate.green;
          this.animate.blue=!this.animate.blue;
        } */
        click(){
          this.styleObj.background==='blue'?this.styleObj.background='green':this.styleObj.background='blue';
        }
      },
      // template:`<div :class="animate" @click="click">hello</div>`
      // template:`<div :class="animate" @click="click">hello</div>`
      template:`<div class="transtion" @click="click" :style="styleObj">hello</div>`
    });

    app.component('', {
      template:``
    });
   
    const vm = app.mount('#root');
  </script>
</body>

</html>